<template>
  <div class="saishi">
    <div class="left">
      <div class="title">
        <div>赛事中心</div>
        <div>更多</div>
      </div>
      <ul>
        <li :class="{ cur: cur == 1 }" @mouseover="cur = 1">KPL</li>
        <li :class="{ cur: cur == 2 }" @mouseover="cur = 2">挑战者杯</li>
        <li :class="{ cur: cur == 3 }" @mouseover="cur = 3">K甲联赛</li>
        <li :class="{ cur: cur == 4 }" @mouseover="cur = 4">城市赛</li>
        <li :class="{ cur: cur == 5 }" @mouseover="cur = 5">高校联赛</li>
        <li :class="{ cur: cur == 6 }" @mouseover="cur = 6">TGA</li>
        <li :class="{ cur: cur == 7 }" @mouseover="cur = 7">微信游戏邀请赛</li>
      </ul>
      <indexsh-top
        v-if="databottom"
        :top="datatop"
        :bottom="databottom"
        :title="title"
      />
    </div>
    <div class="right">
      <div class="title">
        <div>KPL赛程</div>
        <div>购票</div>
        <div>更多</div>
      </div>
      <ul>
        <li>时间</li>
        <li>战队</li>
        <li>战队</li>
      </ul>
      <div class="dd">
        <div>4-6 17:00</div>
        <div>
          <img
            width="25"
            height="25"
            src="https://itea-cdn.qq.com/file/ingame/smoba/php23Al6j7725584461635411173.png"
            alt=""
          />
          <div>杭州LGD大鹅</div>
        </div>
        <div style="color: orange; font-size: 14px">VS</div>
        <div>
          <img
            width="25"
            height="25"
            src="https://itea-cdn.qq.com/file/ingame/smoba/phpgMQlKV17102552371635411458.png"
            alt=""
          />
          <div>长沙TES.A</div>
        </div>
      </div>
      <div class="dd">
        <div>4-6 20:00</div>
        <div>
          <img
            width="25"
            height="25"
            src="https://itea-cdn.qq.com/file/ingame/smoba/phpExWq2g8066506531635411064.png"
            alt=""
          />
          <div>武汉eStarPro</div>
        </div>
        <div style="color: orange; font-size: 14px">VS</div>
        <div>
          <img
            width="25"
            height="25"
            src="https://itea-cdn.qq.com/file/ingame/smoba/phpdDiBig8652864731643193300.png"
            alt=""
          />
          <div>广州TTG</div>
        </div>
      </div>
      <img
        class="i"
        src="https://game.gtimg.cn/images/yxzj/web201706/images/index/match_schedule.jpg"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import IndexshTop from "./IndexshTop.vue";
export default {
  components: { IndexshTop },
  watch: {
    cur(n) {
      if (n == 1) {
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=2598&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=75b91b7476496c4413b5927a8f821cdf&time=1649043346"
          )
          .then((res) => {
            console.log("buttom:", res.data.data.items);
            this.databottom = res.data.data.items;
          });
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=7&logic=or&typeids=1&tagids=2660&exclusiveChannel=4&exclusiveChannelSign=9936fe62e5a15736f02085604313f83b&time=1649042515"
          )
          .then((res) => {
            console.log("top:", res.data.data.items, 2);
            this.datatop = res.data.data.items;
          });
        this.title = "KPL";
      }
      if (n == 2) {
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=1294&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=a61ab6ce377e5b828c8c23a27240ceff&time=1649053544"
          )
          .then((res) => {
            console.log(res, 444444444);
            this.databottom = res.data.data.items;
          });
        this.title = "挑战者";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=7&logic=or&typeids=1&tagids=2661&exclusiveChannel=4&exclusiveChannelSign=0187ea95cf31e09720074d5ff6c0edd9&time=1649053768"
          )
          .then((res) => {
            this.datatop = res.data.data.items;
          });
      }
      if (n == 3) {
        this.title = "K甲联赛";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=2638&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=207c2c625db8321792e019ae353d6245&time=1649058925"
          )
          .then((res) => {
            this.databottom = res.data.data.items;
          });
      }
      if (n == 4) {
        this.title = "城市赛";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=906&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=30b38024f6e4059855a6954fd7effb3f&time=1649056866"
          )
          .then((res) => {
            this.databottom = res.data.data.items;
          });
      }
      if (n == 5) {
        this.title = "高校联";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=684&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=6da05bbe350d67d5f5f55451cfd3e9e5&time=1649058818"
          )
          .then((res) => {
            this.databottom = res.data.data.items;
          });
      }
      if (n == 6) {
        this.title = "TGA";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=681&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=47c01ad310ef507af3cd12f5d6e8d029&time=1649058691"
          )
          .then((res) => {
            this.databottom = res.data.data.items;
          });
      }
      if (n == 7) {
        this.title = "微信游";
        this.axios
          .get(
            "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=2641&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=39bb3fa8980b87b2acd7f59d64afe67b&time=1649054385"
          )
          .then((res) => {
            this.databottom = res.data.data.items;
            console.log(res.data.data.items, 10000000000);
          });
      }
    },
  },
  data() {
    return {
      cur: 1,
      datatop: {},
      databottom: {},
      title: "KPL",
    };
  },
  mounted() {
    this.axios
      .get(
        "/api/cmc/cross?serviceId=18&typeids=2&sortby=sIdxTime&tagids=2598&limit=8&source=web_pc&filter=tag&logic=or&typeids=2&exclusiveChannel=4&exclusiveChannelSign=75b91b7476496c4413b5927a8f821cdf&time=1649043346"
      )
      .then((res) => {
        console.log("buttom:", res.data.data.items);
        this.databottom = res.data.data.items;
      });
    this.axios
      .get(
        "/api/cmc/cross?serviceId=18&filter=tag&sortby=sIdxTime&source=web_pc&limit=7&logic=or&typeids=1&tagids=2660&exclusiveChannel=4&exclusiveChannelSign=9936fe62e5a15736f02085604313f83b&time=1649042515"
      )
      .then((res) => {
        console.log("top:", res.data.data.items, 2);
        this.datatop = res.data.data.items;
      });
  },
};
</script>

<style lang="scss" scoped>
.saishi {
  display: flex;
  justify-content: space-between;
  > .left {
    width: 872px;
    height: 800px;
    // border: 1px solid red;
    .title {
      align-items: center;
      display: flex;
      justify-content: space-between;
      div:first-child {
        background-image: url("/public/img/index.png");
        font-size: 22px;
        font-weight: bold;
        background-position: 0 -182px;
        padding-left: 40px;
      }
      div:last-child {
        background-image: url("/public/img/index.png");
        color: gray;
        font-size: 14px;
        background-position: -252px 3px;
        padding-left: 20px;
      }
    }
    ul {
      margin-top: 20px;
      display: flex;
      background-color: rgb(245, 245, 245);
      li {
        cursor: pointer;
        border-right: 1px solid gray;
        color: gray;
        padding: 0 27px;
        line-height: 29px;
        &.cur {
          color: black;
          border-bottom: 3px solid rgb(243, 194, 88);
        }
      }
    }
  }
  > .right {
    width: 295px;
    height: 800px;
    // border: 1px solid blue;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      > div {
        background-image: url("/public/img/index.png");
        &:first-child {
          font-size: 22px;
          background-position: -157px -106px;
          padding-left: 30px;
        }
        &:nth-child(2) {
          background-position: -243px -83px;
          border: 1px solid orange;
          border-radius: 4px;
          padding: 2px 6px 2px 32px;
          color: 14px;
        }
        &:last-child {
          background-position: -252px 4px;
          padding-left: 20px;
        }
      }
    }
    ul {
      margin-top: 18px;
      background-color: rgb(245, 245, 245);
      display: flex;
      color: gray;
      justify-content: space-around;
      padding: 8px 0;
    }
    .dd {
      border-bottom: 1px solid gray;
      padding: 8px 0;
      display: flex;
      align-items: center;
      font-size: 12px;
      justify-content: space-around;
      > div:nth-child(2) {
        text-align: center;
      }
      > div:last-child {
        text-align: center;
      }
    }
    .i {
      margin-top: 36px;
      border-radius: 3px;
    }
  }
}
</style>